import React from 'react';
import {
    ActivityIndicator,
    Button,
    Text,
    View,
    Image,
    StyleSheet,
    Dimensions,
    StatusBar,
    FlatList,
    ScrollView,
    RefreshControl,
    Animated,
    TouchableHighlight,
    SectionList, TouchableOpacity, DeviceEventEmitter, TextInput, Modal
} from 'react-native';

//引入

import Styles from './Styles';
import Httpc from "../../../utils/Httpc";
import DLTREQUEST from "./DLTREQUEST";
const { width, height } = Dimensions.get('window')

export default class DLTHistory extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            page: 0,
            rows: 10,
            total: 0,
            totalpage: 1,
            lists: [],
        };
    }
    static navigationOptions = {
        title: '开奖历史',
        //header: null,  //隐藏顶部导航栏
        //tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: '#d0162e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            //fontWeight: 'bold',
        },
    }
    componentWillMount() {

    }
    componentWillUnmount() {

    }
    componentDidMount() {
        this.getServerData(() => {

        });

    }
    getServerData(callback) {
        let params = {};
        let { page, rows, lists } = this.state;
        params.page = page + 1;
        params.rows = rows;
        Httpc.get(DLTREQUEST.DLTGlotteRecode, params, (res) => {
            this.setState({
                page: page + 1,
                total: res.total,
                totalpage: res.totalpage,
                lists: lists.concat(res.Data.Data),
            });
            callback();
        })
    }
    _onEndReached() {
        if (this.state.page < this.state.totalpage) {
            this.getServerData(() => { });
        } else {
            console.log('我是有底线的');
        }
    }
    _separator() {
        return <View style={{ height: 0.5, backgroundColor: '#ededed' }} />;
    }
    _on_newsDeatiled = (Number) => {
        this.props.navigation.navigate('DLTNewLottery', {
            Number: Number
        });
    }
    _createNewsItem = ({ item }) => {
        let ball = item.Result.split('|');
        let red_ball = ball[0].split(',');
        let blue_ball = ball[1].split(',');
        return (
            <TouchableOpacity onPress={() => this._on_newsDeatiled(item.Number)}>
                <View style={{ flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center', width: width, borderBottomColor: '#f7f7f7', borderBottomWidth: 1 }}>
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', width: width }}>
                        <Text style={{ padding: 10 }}>开奖日期：{item.Opentime.substr(0, 10)}</Text>
                        <Text style={{ padding: 10 }}>{item.Number}期</Text>
                    </View>
                    <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: width, paddingLeft: 10, marginBottom: 10, height: 25 }}>
                        <View style={Styles.red_ball_on}>
                            <Text style={{ color: '#ffffff' }}>{red_ball[0]}</Text>
                        </View>
                        <View style={Styles.red_ball_on}>
                            <Text style={{ color: '#ffffff' }}>{red_ball[1]}</Text>
                        </View>
                        <View style={Styles.red_ball_on}>
                            <Text style={{ color: '#ffffff' }}>{red_ball[2]}</Text>
                        </View>
                        <View style={Styles.red_ball_on}>
                            <Text style={{ color: '#ffffff' }}>{red_ball[3]}</Text>
                        </View>
                        <View style={Styles.red_ball_on}>
                            <Text style={{ color: '#ffffff' }}>{red_ball[4]}</Text>
                        </View>

                        <View style={Styles.blue_ball_on}>
                            <Text style={{ color: '#ffffff' }}>{blue_ball[0]}</Text>
                        </View>
                        <View style={Styles.blue_ball_on}>
                            <Text style={{ color: '#ffffff' }}>{blue_ball[1]}</Text>
                        </View>

                    </View>
                </View>
            </TouchableOpacity>
        );
    }
    _onRefresh = () => {
        if (this.state.refreshing) {
            return;
        }
        this.setState({ refreshing: true });
        let _this = this;
        let params = {};
        let rows = this.state.rows;
        params.page = 1;
        params.rows = rows;
        Httpc.get(DLTREQUEST.DLTGlotteRecode, params, function (res) {
            this.setState({
                page: 1,
                rows: rows,
                total: res.total,
                totalpage: res.totalpage,
                lists: res.Data.Data,
            });
            _this.setState({ refreshing: false });
        }.bind(this))
    }
    render() {
        let { lists } = this.state;
        if (lists.length == 0) {
            return (
                <View></View>
            );
        }
        return (
            <View style={[Styles.container]}>
                <FlatList
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this._onRefresh}
                        />
                    }
                    data={lists}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={this._createNewsItem}
                    onEndReached={this._onEndReached.bind(this)}
                    onEndReachedThreshold={1}
                    ItemSeparatorComponent={this._separator}
                />

            </View>
        )
    }
}
